<template>
  <div class="login_wrap">
      <el-row >
         <el-col :span="12">
          <img class="mybanner" src="https://img1.baa.bitautotech.com/dzusergroupfiles/2024/02/28/0c6647bc9ccb4170ab4bd5a30daff343.jpg" alt="">
         </el-col>
         <el-col :span="12" style="position:relative">
              <div class="con_wrap" v-if="viewFlag">
                <el-form :model="loginState" :rules="loginRules" ref="loginForm">
                  <el-form-item prop="username">
                      <el-input v-model="loginState.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="loginState.password" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                     <el-form-item >
                      <el-button @click="toLogin" type="primary" style="width:500px;">登录</el-button>
                  </el-form-item>
                </el-form>
                <el-link  @click="viewFlag=false" :icon="Right">注册</el-link>
              </div>
              <div class="reg_wrap" v-if="!viewFlag">
                 <el-form :model="formState" :rules="rules" ref="regForm">
                  <el-form-item prop="username">
                      <el-input v-model="formState.username" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="formState.password" placeholder="密码"></el-input>
                  </el-form-item>
                     <el-form-item prop="repassword">
                      <el-input v-model="formState.repassword" placeholder="确认密码"></el-input>
                  </el-form-item>
                    <el-form-item >
                       <el-button @click="toReg" type="primary" style="width:500px;">注册</el-button>
                  </el-form-item>
                </el-form>
                <el-link   @click="viewFlag=true" :icon="Back">返回</el-link>
              </div>
           
         </el-col>
      </el-row>
    
  </div>
</template>
<script lang="ts" setup>
import {Back,Right} from '@element-plus/icons-vue'
  import {ref,reactive} from 'vue'
  let viewFlag=ref<boolean>(true)//控制显示哪个视图的
 import {toRegUser,toLoginApi} from '@/api/user'
import type {FormInstance,FormRules} from 'element-plus'
import userStore from '@/store/userStore'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus';
let  uStore= userStore()
let router=useRouter();
 let formState=reactive({ //注册需要的v-model数据
  username:"",
  password:"",
  repassword:""
 })

// 自己写的规则
 
 let checkPass=(rule: any, value: any, callback: any)=>{
     if(value!=formState.password){
       callback(new Error("两次密码不一致"))
     }else{
       callback()
     }
 }
 let rules={ //注册的规则
  username:[
    {required:true,message:"用户名不能为空",trigger:"blur"}
  ],
  password:[
    {required:true,message:"密码不能为空",trigger:"blur"}
  ],
  repassword:[{validator:checkPass,trigger:"blur"}]
 }
let regForm=ref<FormInstance|null>()
let toReg=()=>{
  regForm.value?.validate(async (valid:boolean)=>{
     if(valid){
        let res=await toRegUser(formState)
        console.log(res,"--------注册接口")
        ElMessage.success("注册成功")
        viewFlag.value=true;//切换到登录视图
        
     }
  })
}
 
// ---------------------------------------登录
interface Ilogin{
  username:string,
  password:string
}
let loginState=reactive<Ilogin>({ //登录v-model的数据
  username:"",
  password:""
})
let loginRules:FormRules={ //登录的验证规则
  username:[
    {required:true,message:"用户名不能为空",trigger:"blur"}
  ],
  password:[
    {required:true,message:"密码不能为空",trigger:"blur"}
  ]
}

// 登录接口
let loginForm=ref<FormInstance|null>()
let toLogin=()=>{
  loginForm.value?.validate(async (valid:boolean)=>{
     if(valid){
       let res=await toLoginApi(loginState)
       ElMessage.success("登录成功")
       console.log(res,"-----------------登录")
        uStore.changeToken(res.token) //将token存储到pinia
        router.push("/layout/newscate")//跳转文章分类
     }

  })
}

</script>
<style lang="scss">
.login_wrap{
  width: 100%;
  height: 100vh;
overflow: hidden;
}
  .mybanner{
    width: 100%;
    height: 100vh;

  }
  .con_wrap,.reg_wrap{
    width: 500px;
    height: 500px;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
  }

</style>